<template>
	<div class="NBA">
		<NBA-header></NBA-header>
		<div class="scrollerWrap">
		  <scroller  height="100%" :on-infinite="infinite" ref="scrollerBottom">
		    <main class="scrollerContent">
		      <ul v-if='list.length > 0' class="list">
					<template v-if='list'>
				    	<div 
					        v-for='(item,index) in list'
					    >
					        <h3 class="date">{{ item.date}}</h3>
					        <ul>
					          	<router-link
							        tag="li"
							        v-for="items in item.matches"
							        :key="items.mid"
							        :to="'/DeatilLQ/' + items.mid"
							      >
							    	<p class="li-tit">
							          	<span>{{ items.ln }}<font>{{ items.sd}}</font></span>
								        <!--进行中-->
								        <i v-if='items.sts == "inprogress"' class="redColor">
								              {{ items.min }}<b class="dian">'</b>
								        </i>
								        <i v-else-if='items.sts == "notstarted"'>未开始</i>
								        <i v-else-if='items.sts == "finished"'>已结束</i>
								        <i v-else>取消</i>
							        </p>
							        <div class="li-con">
							          	<div class="li-con-left">
								            <img :src='getImgUrl(items.hig)' :onerror="noImg">
								            <span>{{items.hz | ellipses("6")}}</span>
								            <div class="bifen">
								              <span v-if='items.hm_q1'>{{ items.hm_q1 }}</span>
								              <span v-if='items.hm_q2'>{{ items.hm_q2 }}</span>
								              <span v-if='items.hm_q3'>{{ items.hm_q3 }}</span>
								              <span v-if='items.hm_q4'>{{ items.hm_q4 }}</span>
								              <span v-if='items.hm_fs' class="redColor">{{ items.hm_fs }}</span>
								            </div>
							          	</div>
							          	<div class="li-con-right">
								            <img :src='getImgUrl(items.aig)' :onerror="noImg">
								            <span>{{ items.az | ellipses("6")}}</span>
								            <div class="bifen">
								              <span v-if='items.aw_q1'>{{ items.aw_q1 }}</span>
								              <span v-if='items.aw_q2'>{{ items.aw_q2 }}</span>
								              <span v-if='items.aw_q3'>{{ items.aw_q3 }}</span>
								              <span v-if='items.aw_q4'>{{ items.aw_q4 }}</span>
								              <span v-if='items.aw_fs' class="redColor">{{ items.aw_fs }}</span>
								            </div>
								        </div>
								    </div>
							    </router-link>
					        </ul>
				      	</div>
				    </template>
				</ul>
		      	<p v-else class="noData">暂无比赛</p> 
		    </main>
		  </scroller>
		</div>
	</div>
</template>
<script>
import axios from 'axios'
import NBAHeader from './components/Header'
import { Toast,Indicator  } from 'mint-ui'
export default {
	name: 'NBA',
	components:{
		NBAHeader,
	},
	data:function(){
		return {
			list:new Array,
			currentTime:'',
			noImg:'this.src="/static/img/basket.png"',
		}
	},
	methods:{
		getListInfo:function(date,calkback){
			Indicator.open({
			  text: '加载中···',
			  spinnerType: 'fading-circle'
			});
			let dates = date || "",t = this;
          	axios.get('/api/getNBASchedule.php?dateStr='+dates)
            .then(function(res){
            	Indicator.close();
            	res = res.data
		        if (res.status == 0 && res.data) {
		        	var list = res.data.list;
		        	if (list.length > 0) {
		        		t.currentTime = res.data.min
		        		t.list = t.list.concat(list)
		        		//表示状态，可以继续加载
		        		calkback()
		        	}else{
		        		//表示状态，没有数据了，不能再继续加载了
		        		calkback(true)
		        	}
		        }else{
		        	//表示状态，没有数据了，不能再继续加载了
		        	calkback(true)
		        }
            })
            .catch(function (error) {
                console.log(error);
              });
        },
        getImgUrl:function(_url) {
        	return _url
       	},
		infinite(done){//上拉加载
	      	setTimeout(() => {
	          this.getListInfo(this.currentTime,done);
	        },500)
	    },
	},
	created() {
		this.getListInfo();
	},
	mounted(){
	},
	activated(){
	}
};
</script>
<style lang="less" scoped>
  @import '~styles/varibles.less';
  .list .date{
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      width: 100%;
      background: #F5F5F5;
      text-align: center;
      font-weight: bold;
  }
  .li-tit{
    height: .49rem;
    line-height: .49rem;
    display: flex;
    padding:0 .25rem;
    justify-content: space-between;
    background: #F5F8FB;
    span{
      flex: 1;
      color: #828181;
      font{
        margin-left:.4rem;
        color: #2F2F2F;
      }
    }
    i{
      font-size: .22rem;
      color: #828181;
    }
  }
  .li-con{
    padding:.25rem;
    .li-rank{
      font-size: .22rem;
      color: @grayColor;
    }
    .li-con-left,.li-con-right{
      padding:.1rem 0;
      display: flex;
      align-items:center;
      img {
        width: .5rem;
        height: .5rem;
        margin-right: .2rem;
      }
      p{
        vertical-align: text-bottom;
      }
      .bifen{
        text-align: right;
        flex: 1;
        padding-right: .2rem;
        span{
          margin:0 .05rem;
        }
      }
    }
  }
  @keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-moz-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-o-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-webkit-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  @-ms-keyframes mymove{
      0% {opacity:1;}
      80% {opacity:1;}
      100% {opacity:0;}
  }
  .dian{
    padding-left:.05rem;
    animation:mymove 1s infinite;
    -moz-animation:mymove 1s infinite; /* Firefox */
    -webkit-animation:mymove 1s infinite; /* Safari and Chrome */
    -o-animation:mymove 1s infinite; /* Opera */
  }
  .noData{
    padding:0.5rem 0;
    text-align: center;
    color: @grayColor
  }


  .scrollerWrap{
    position:absolute;
    width:100%;
    height:calc(100% - 1rem);//有header的时候可能会出现滚动条，所以最好高度是除去header的高度
    top:1rem;//一般页面有header的时候需要留出header的高度
    bottom:0;
    main{
      height:100%;
    }
  }
</style>